<template>
    <div class="side-menu">
        <el-menu default-active="2" class="agent-menu" :collapse="isCollapse" @open="handleOpen" @close="handleClose" background-color="#ffffff00">
            <el-menu-item index="2">
                <el-icon>
                    <House />
                </el-icon>
                <template #title>首页</template>
            </el-menu-item>
            <el-sub-menu index="1">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>工作流程</span>
                </template>
                <el-menu-item index="1-3">流程设计</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
                <template #title>
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>系统设置</span>
                </template>
                <el-menu-item index="3-3">用户管理</el-menu-item>
                <el-menu-item index="3-3">角色管理</el-menu-item>
                <el-menu-item index="3-3">部门管理</el-menu-item>
                <el-menu-item index="3-3">菜单管理</el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>


<script setup>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

// 放缩侧边栏，计算属性
let isCollapse = computed(() => {
    return store.state.changeCollapse.isCollapse
})

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
</script>



<style lang="scss" scoped>
.side-menu {
    height: 100vh;

    .agent-menu {
        height: 100%;
    }
}
</style>